<nz-drawer
  [nzClosable]="false"
  [nzVisible]="visible"
  nzPlacement="right"
  [nzTitle]="$t('_edit')"
  (nzOnClose)="handleClose()"
  [nzFooter]="footerTpl"
>
  <form nz-form [formGroup]="validateForm" *nzDrawerContent>
    <nz-form-item>
      <nz-form-label [nzSpan]="8">{{ $t('_topColor') }}</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-color-picker nzTrigger="hover" formControlName="topColor" />
      </nz-form-control>
      <div>
        <nz-form-control>
          <input nz-input formControlName="topColor" />
        </nz-form-control>
      </div>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="8">{{ $t('_bgColor') }}</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-color-picker nzTrigger="hover" formControlName="bgColor" />
      </nz-form-control>
      <div>
        <nz-form-control>
          <input nz-input formControlName="bgColor" />
        </nz-form-control>
      </div>
    </nz-form-item>
  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px" (click)="handleClose()">
        {{ $t('_cancel') }}
      </button>
      <button nz-button nzType="primary" (click)="handleSubmit()">
        {{ $t('_submit') }}
      </button>
    </div>
  </ng-template>
</nz-drawer>
